<template>
  
        <div class="btns clearfix">
            
            <a
              href="javascript:;"
              title="播放"
              class="btn1"
             @mousedown="play_musics"
            >
              <i >
                <em class="play1"></em>
                 播放
              </i>
            
            </a>
            <a
              href="javascript:;"
              title="添加"
              class="btn2"
              @mousedown="add_musics"
            >
            </a>
            <a href="javascript:;" title="收藏" class="btn3">
              <i v-if="sub.playlist.subscribedCount">({{sub.playlist.subscribedCount}})</i>
              <i v-if="!sub.playlist.subscribedCount">收藏</i>
            </a>
            <a href="javascript:;" title="分享" class="btnA btn4">
              <i class="btni">({{sub.playlist.shareCount}})</i>
            </a>
            <a href="javascript:;" title="下载" class="btnA btn5">
              <i class="btni">下载</i>
            </a>
            <a href="javascript:;" class="btnA btn6">
              <i class=" btni">({{sub.playlist.commentCount}})</i>
            </a>
          </div>

   
</template>

<script>
export default {
        name:'PageFns',
       
        props:['sub','mdata'],
        methods:{
          play_musics(){
    
            this.$bus.$emit('musicLists',this.mdata)
          },
          add_musics() {
            
             this.$bus.$emit('addPlayLists',this.mdata)
          }
         
        },
     
      
}
</script>

 <style scoped lang='less'>
  .btns {
  margin: 0 0 25px 0;
  i {
      font-family: simsun,\5b8b\4f53;
  }
}
.play1 {
  float: left;
  width: 20px;
  height: 18px;
  margin: 6px 2px 2px 0;
  overflow: hidden;
  background: url(../images/button2.png) no-repeat 0 -1622px;
 
}
.btn1 {
  float: left;
  height: 31px;
  line-height: 31px;
  overflow: hidden;
 
  padding: 0 5px 0 0;
  text-align: center;
  background: url(../images/button2.png) no-repeat right -428px;
  cursor: pointer;
  color: #fff;
  i {
    display: inline-block;
    line-height: 31px;
    height: 31px;
    padding: 0 7px 0 8px;
    background: url(../images/button2.png) no-repeat 0 -387px;
    vertical-align: top;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    font-size: 12px;
    


  }
  //  &:hover {
  //     text-decoration: none;
  //     background: url(../images/button2.png) no-repeat 0 -469px;
  //     .play1 {
  //         background: url(../images/button2.png) no-repeat -28px -1622px;
  //     }

  // }
}
.btn2 {
  float: left;
  margin-right: 5px;
  margin-left:-3px ;
  height: 31px;
  width: 31px;
  background: url(../images/button2.png) no-repeat 0px -1588px;
  cursor: pointer;
  &:hover {
       background: url(../images/button2.png) no-repeat -40px -1588px;
  }
}
.btn3 {
  float: left;
  margin-right: 6px;
  padding: 0 5px 0 0;
  height: 31px;
  line-height: 30px;
  background: url(../images/button2.png) no-repeat right -1020px;
  cursor: pointer;
  &:hover {
      background: url(../images/button2.png) no-repeat right -1106px;
      i {
          background: url(../images/button2.png) no-repeat 0px -1063px;
      }
  }
  i {
    float: left;
    min-width: 23px;
    height: 31px;
    padding: 0 2px 0 28px;
    background: url(../images/button2.png) no-repeat 0px -977px;
   
  }
}
.btnA {
  float: left;
  margin-right: 6px;
  padding: 0 5px 0 0;
  height: 31px;
  line-height: 30px;
  cursor: pointer;
  background: url(../images/button2.png) no-repeat right -1020px;
}
.btni {
  display: inline-block;
  padding-right: 2px;
  padding-left: 28px;
  height: 31px;
  line-height: 30px;
}

.btn4 {
  background: url(../images/button2.png) no-repeat right -1020px;
  &:hover {
      background: url(../images/button2.png) no-repeat right -1106px;
      i {
          background: url(../images/button2.png) no-repeat 0px -1268px;
      }
  }
  i {
    background: url(../images/button2.png) no-repeat 0 -1225px;
  }
}

.btn5 {
   &:hover {
      background: url(../images/button2.png) no-repeat right -1106px;
      i {
          background: url(../images/button2.png) no-repeat 0px -2805px;
      }
  }
  i {
    background: url(../images/button2.png) no-repeat 0 -2761px;
  }
}
.btn6 {
   &:hover {
      background: url(../images/button2.png) no-repeat right -1106px;
      i {
          background: url(../images/button2.png) no-repeat 0px -1508px;
      }
  }
  i {
       padding-right: 8px;
  background: url(../images/button2.png) no-repeat 0 -1465px;
  }
 
}
 </style>